
{% extends 'base.html.twig' %}

{% block stylesheets %}
    <style>
        .page { width: 100%; height: 100%; position: relative; overflow: hidden; }
        .layer { position: absolute; left: 0; right: 0; margin: auto; }
        
        .loading { position: absolute; width: 100%; background-color: #183843; overflow: hidden; z-index: 30; height: 100vh; }
        .loading .hand:nth-child(even) { bottom: 0; }
        .loading .hand:nth-child(odd) { top: 0; }
        .loading .hand { 
            position: absolute; left: 0; right: 0; 
            transform: rotate(180deg); -webkit-transform: rotate(180deg);
        }
        .loading .hand1 { transform-origin: 100% 30%;  -webkit-transform-origin: 100% 30%;}
        .loading .hand2 { transform-origin: center bottom; -webkit-transform-origin: center bottom; }
        .loading .hand3 { transform-origin: 80% 0%; -webkit-transform-origin: 80% 0%; }
        .loading .hand4 { transform-origin: 0% 10%; -webkit-transform-origin: 0% 10%; }
        .loading .hand5 { transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; }
        .loading .hand6 { transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; }
        
        .loading .percent-wrapper { padding-top: 65%; width: 100%; text-align: center; }
        .loading .percent-wrapper #percent { font-size: 35px; color: #fff; position: relative; z-index: 2; top: -2px; }
        .loading .percent-wrapper .percent-icon { width: 30px; position: relative; z-index: 2; }
        .loading .percent-wrapper #load-text { text-align: center; margin: 5px auto; }
        .loading .percent-wrapper #load-text img { margin: 0 auto; position: relative; opacity: 0; display: block; z-index: 0; }
        .loading #load-text .text1 { width: 128px; }
        .loading #load-text .text2 { width: 162px; }
        .loading #load-text .text3 { width: 126px; }
                
        .index.page { background-color: #183843; }        
        .index .load-title { width: 100%; top: 35%; opacity: 0; position: absolute; z-index: 40; left: 0; }
        .index .cloud { top: 0; }
        .index .aperture {
            top: 20%;
            opacity: 0;
        }
        .index .aperture .aperture-text { width: 44.5%; top: 0; z-index: 2; opacity: 0; }
        .index .aperture .buddha {
            top: 0;
            width: 320px; height: 326px; z-index: 2;
            background: transparent url("{{ imgsrc('images/buddhasprites/buddha3.png') }}") no-repeat center center;
            background-size: cover;
            transform-origin: center top;
            -webkit-transform-origin: center top;
        }
        .index .aperture .buddha-hand {
            position: absolute;
            top: 0;
            width: 320px; height: 326px; opacity: 0;
            transform-origin: center top;
            -webkit-transform-origin: center top;
        }
        {% for i in 1..12 %}
        .index .aperture .buddha-hand{{ i }} {
            background: transparent url("{{ imgsrc('images/buddhasprites/'~ i ~'.png') }}") no-repeat center center;
            background-size: cover;
        }
        {% endfor %}
        .index .aperture .buddha-hand9 { z-index: 1; }
        .index.w360 .aperture .buddha, .index.w360 .aperture .buddha-hand {
            width: 360px; height: 367px;
        }
        .index.w375 .aperture .buddha, .index.w375 .aperture .buddha-hand {
            width: 375px; height: 382px;
        }
        
        
        .index .logo { display: block; width: 100%; position: absolute; bottom: 6%; opacity: 0; z-index: 12; }
        
        .game { display: none; }
        .game.page { background-color: #fff; }
        .game .part { width: 100%; height: 100%; }
        .game .layer { top: 0; width: 100%; display: block; }   
        .game .part .stuff { display: none; }
        .game .part .stuff:first-child { display: block; }
        .game .palettes {
            width: 100%;
            position: absolute; bottom: 70px; padding-left: -10px; z-index: 11; height: 26px;
        }
        .game .map .palette { position: absolute; display: none; width: 36px; bottom: 0px; padding: 0 5px; }
        {% for i in 1..8 %}
            .game .palette.palette{{ i }} { left: {{ i * 10 }}%;  }
        {% endfor %}
        .game .map .palette.active { bottom: 12px; }
        //.game .map .palette-layer1 { display: block; }
        .game .game-notice { position: absolute; width: 100%; z-index: 11; bottom: 70px; text-align: center; color: black; font-size: 16px; font-weight: bolder; }
        
        .game .btn-submit { position:absolute; width: 207px; display: block; bottom: 15px; left: 0; right: 0; margin: auto; z-index: 12; }
        .game .map { position: absolute; width: 100%; height: 100%; z-index: 10; font-size: 25px; line-height: 25px; }
        .game .map #canvas { position:absolute; width: 100%; height: 100%; opacity: 0; }
        
        {% set useMask = [1,2,3,6,7,9] %}
        {% for i in 0..5 %}
            .game .part{{ useMask[i] }} { background: url("{{ imgsrc('images/part') }}{{ useMask[i] }}/2.png") no-repeat top center; background-size: 100%; }
            .game .part{{ useMask[i] }} .mask { 
                mask-image: url("{{ imgsrc('images/mask/mask') }}{{ useMask[i] }}.png");
                -webkit-mask-image: url("{{ imgsrc('images/mask/mask') }}{{ useMask[i] }}.png");
                mask-size: 100%;
                -webkit-mask-size: 100%;
                -webkit-mask-repeat: no-repeat;
            }
        {% endfor %}
        .game .part1.white { background: url("{{ imgsrc('images/part1/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part3.white { background: url("{{ imgsrc('images/part3/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part6.white { background: url("{{ imgsrc('images/part6/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part7.white { background: url("{{ imgsrc('images/part7/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part9.white { background: url("{{ imgsrc('images/part9/1.png') }}") no-repeat top center; background-size: 100%; }
        
        /* 针对云上色 */
        .game .part3 { background: url("{{ imgsrc('images/cloudbg.png') }}") no-repeat top center; background-size: 100%; }
        
        .popup .gameover { width: 320px; margin: 0 auto; position: relative; top: 20%; overflow: hidden; }
        .popup .gameover .complete { position: absolute; width: 100%; top: 72px; }
        .popup .gameover .perfect { position: absolute; width: 100%; top: 119px; }
        .popup .gameover .bar { background-color: black; width: 120px; height: 8px; position: absolute; left: 120px; top: 0; }
        .popup .gameover .score { position: absolute; left: 248px; top: -3px; color: black; font-weight: bolder; font-size: 18px; }
        .popup .result { width: 320px; margin: 0 auto; position: relative; display: none; }
        .popup .result .coupon { position: absolute; top: 167px; left: 105px; font-size: 20px; }
        .popup .result .btn-share { width: 207px; display: block; margin: 30px auto 10px; }
        .popup .result .btn-again { width: 207px; display: block; margin: 10px auto; }
        .popup .chenghao { position: absolute; width: 100%; text-align: center; top: 70px; z-index: 12; color: black;font-size: 22px; }
        
        .background-img { display: none; }
        .background-img img { display: none; }
        
    </style>
{% endblock %}

{% block body %}
    <div class="background-img">
        <img id="loading-buddha" src="{{ imgsrc('images/buddhasprites/buddha3.png') }}"/>
        <img src="{{ imgsrc('images/mask/mask2.png')}}"/>
        <img src="{{ imgsrc('images/mask/mask3.png')}}"/>
        <img src="{{ imgsrc('images/mask/mask6.png')}}"/>
        <img src="{{ imgsrc('images/mask/mask7.png')}}"/>
        <img src="{{ imgsrc('images/mask/mask9.png')}}"/>
        <img src="{{ imgsrc('images/part3/1.png')}}"/>
        <img src="{{ imgsrc('images/part6/1.png')}}"/>
        <img src="{{ imgsrc('images/part7/1.png')}}"/>
        <img src="{{ imgsrc('images/part9/1.png')}}"/>
    </div>
    <div class="loading">
        {% for i in 1..6 %}
            <img class="hand hpimg hand{{ i }}" src="{{ imgsrc('images/loading/f')}}{{ i }}.png"/>
        {% endfor %}
        <div class="percent-wrapper" >
            <span id="percent">0</span>
            <img class="percent-icon" src="{{ imgsrc('images/percent.png')}}"/>
            <div id="load-text" class="show-text1">
                <img class="text1" src="{{ imgsrc('images/load-text1.png')}}"/>
                <img class="text2" src="{{ imgsrc('images/load-text2.png')}}"/>
                <img class="text3" src="{{ imgsrc('images/load-text3.png')}}"/>
            </div>    
        </div>            
    </div>    
    
    <div class="index page">
        <img class="load-title hpimg" src="{{ imgsrc('images/title.png')}}"/>
        <img class="layer cloud hpimg" src="{{ imgsrc('images/part2/2.png')}}"/>
        <img class="layer cloud hpimg" src="{{ imgsrc('images/part3/22.png')}}"/>
        <div class="layer aperture">
            <div class="buddha layer">             
            </div>            
            <img class="hpimg" src="{{ imgsrc('images/guangquan.png')}}"/>
            <img class="aperture-text layer" src="{{ imgsrc('images/aperture-text.png')}}"/>
            {% for i in 1..12 %}
                <div class="buddha-hand layer buddha-hand{{ i }}"></div>
                {#<img class="buddha-hand layer buddha-hand{{ i }}" src="{{ imgsrc('images/hands/')}}{{ i }}.png"/>#}
            {% endfor %}
        </div>
        <a class="logo layer" href="#"><img class="hpimg" src="{{ imgsrc('images/logo.png')}}"/></a>    
    </div>
    {% set part1 = ['#fff','#102933', '#2E4698', '#9D1659', '#42B3B3', '#97CF9C', '#FF9166', '#F9EAD5'] %}
    {% set part2 = ['#fff','#E6DBCA', '#8CCCBD', '#F3C047', '#F76930', '#E9487A', '#E96CE3', '#C2A2E6'] %}
    {% set part3 = ['#fff','#009B9F', '#68DBD6', '#8CCCBD', '#F3C047', '#F76930', '#E9487A', '#844DC7'] %}
    {% set part6 = ['#fff','#FEEADD', '#FFB99D', '#FD9772', '#FD9772', '#C4532C', '#A1644D', '#0091BE'] %}
    {% set part7 = ['#fff','#00919B', '#C93F40', '#D89A57', '#BCD462', '#00C286', '#2B50AB', '#B82885'] %}
    {% set part9 = ['#fff','#C9566B', '#FFF477', '#E1B24C', '#42B3B3', '#DA2C72', '#557AC3', '#F9EAD5'] %}
    {% set parts = [part1, part2, part3, '', '', part6, part7, '', part9] %}
    <div class="game page">
        {% for i in 1..9 %}
        <div class="first part part{{ i }} layer {% if i == 1 or i == 3 or i == 6 or i == 7 or i == 9 %} white {% endif %}" style="z-index: {{ i }}">               
            {% for j in 1..8 %}
                {% if i == 4 or i == 5 or i == 8 %}
                <img class="stuff stuff{{ j }} layer" src="{{ imgsrc('images/part')}}{{ i }}/{{ j }}.png"/>
                {% else %}
                <div class="stuff stuff{{ j }} layer mask" style="background-color: {{ parts[i-1][j - 1] }}; height: 100%;"></div>    
                {% endif %}                
            {% endfor %}
        </div>
        {% endfor %}
        
        <div class="map">
            <canvas id="canvas"></canvas>
            <div class="palettes">
            {% for i in 1..9 %}
                {% for j in 1..8 %}
                <a class="palette palette-layer{{ i }} palette{{ j }} {% if j == 2 %} active {% endif %}" data-layer="{{ i }}" data-palette="{{ j }}" href="#">
                    <img class="hpimg" src="{{ imgsrc('images/part')}}{{ i }}/ball{{ j }}.png"/>                
                </a>
                {% endfor %}
            {% endfor %}
            </div>
            <div class="fang game-notice">点击画面，为食神上色吧！</div>
            <a class="btn-submit" href="#"><img class="hpimg" src="{{ imgsrc('images/btn-submit.png')}}"/></a>
        </div>    
        <div class="popup">
            <div class="gameover" >
                <img class="hpimg" src="{{ imgsrc('images/end.png')}}"/>
                <div class="complete">
                    <div class="bar"></div>
                    <div class="score fang">0</div>
                </div>
                <div class="perfect">
                    <div class="bar"></div>
                    <div class="score fang">0</div>
                </div>
            </div>
            <div class="result">
                <img class="hpimg" src="{{ imgsrc('images/result.png')}}?v=1"/>
                <div class="fang2 chenghao">"现实主义配色大师"</div>
                <div class="coupon">23423534522345</div>
                <a class="btn-share" href="#"><img class="hpimg" src="{{ imgsrc('images/btnshare.png')}}"/></a>
                <a class="btn-again" href="#"><img class="hpimg" src="{{ imgsrc('images/btnagain.png')}}"/></a>
            </div>   
        </div>    
    </div>
    <div class="overlay">
        <img class="hpimg" src="{{ imgsrc('images/share.png')}}"/>
    </div> 
                
{% endblock %}

{% block javascripts %}    
    <script>
        $(function(){
            $('.index').addClass('w'+w);
            $('#body').on('touchmove', function(e){
                e.stopPropagation();
                e.preventDefault();
            });
            $('.palettes').on('touchstart', function(e){
                e.stopPropagation();
                e.preventDefault();
            });
            /*
            $('#loading-buddha').load(function(){
                for (var i=1; i<13; ++i) {
                    $('<img />').attr('src', 'images/buddhasprites/' + i + '.png');
                }
            });*/
            
            var loading = function(){
                this.step = 1;//loading分为四步动画
                this.cdtimer = 0;//加载进度计时器
                this.loadcd = 70;//加载快慢控制
                this.percent = 0;//加载进度
                this.animationEnd = false;
                this.loadAll =false;
                this.loadEndTime = 7000;
                this.handsMove = function(hands, direction){
                    TweenMax.fromTo(hands, 0.8,{rotation: -180 * direction}, {css: {rotation: 5 * direction}, onComplete: function (e) {
                        TweenMax.fromTo( hands, 0.3, { rotation: 5 * direction}, {rotation: 0});
                        TweenMax.fromTo(hands, 0.3,{rotation: 0}, {css: {rotation: 5 * direction}, delay: 1, onComplete: function (e) {
                            TweenMax.fromTo( hands, 2.8, { rotation: 5 * direction}, {rotation: -180 * direction});    
                        }});
                    }});
                    this.textMove();
                };
                //加载文字替换
                this.textMove = function(){
                    TweenMax.fromTo($('#load-text .text' + (this.step - 1)), 0.5, {opacity: 1, y: 0}, {opacity: 0, y: -21, display: "none"});
                    TweenMax.fromTo($('#load-text .text' + this.step), 0.5, {opacity: 0, y: 10}, {opacity: 1, y: 0, delay: 0.5});
                    this.step += 1;
                };
                this.loadEnd = function(){
                    var loadTitle = $('.load-title');
                    TweenMax.fromTo($('.percent-wrapper'), 0.5, {opacity: 1, y: 0}, {opacity: 0, y: -21, onComplete: function (e) {
                        TweenMax.fromTo(loadTitle, 0.5,{opacity: 0, y: 20},{opacity: 1, y: 0, delay: 0.3});
                    }});
                    TweenMax.fromTo(loadTitle, 0.5,{ y: 0},{ y: 15, repeat: 1, delay: 1.3, yoyo: true, ease: Linear.easeNone, onComplete: function (e) {
                        $('.loading').hide();
                        TweenMax.fromTo(loadTitle, 0.5,{top: '40%'},{top: 0});
                        //背景动画
                        TweenMax.staggerFromTo($('.layer.cloud'), 1,{scale: 2},{scale: 1}, 0.3);
                        //光圈动画
                        TweenMax.fromTo($('.aperture'), 1, { scale:0.3, opacity: 0.8}, { scale:1.0, opacity: 1});
                        TweenMax.fromTo($('.aperture-text'), 0.5,{y: -25, opacity: 0},{y: 10, opacity: 1, delay: 1, onComplete: function (e) {
                            TweenMax.fromTo($('.aperture-text'), 0.2,{y: 10} , {y: 0});
                        }});
                        //佛像跟手的动画
                        TweenMax.fromTo($('.buddha'), 0.5,{ scale: 0 }, { scale: 1, delay: 0.8, onComplete: function (e) {
                            TweenMax.staggerFromTo($('.buddha-hand:nth-child(even)'), 0.4,{rotation: -20, opacity: 0},{rotation: 0, opacity: 1}, 0.3);
                            TweenMax.staggerFromTo($('.buddha-hand:nth-child(odd)'), 0.4,{rotation: 20, opacity: 0},{rotation: 0, opacity: 1}, 0.3);                                
                            TweenMax.fromTo($('.logo'), 0.5, {width: 0, opacity: 0.5} , {width: '100%', opacity: 1, delay: 2});
                        }});
                    }});
                    //动画结束开始涂色
                    setTimeout(function () {
                        //console.log(this.loadAll);
                        if( this.loadAll ) {
                            $('.index.page').hide();
                            $('.game.page').show();
                        }
                        this.animationEnd = true;
                    }.bind(this), this.loadEndTime);
                    this.step += 1;
                };
                this.start = function(){
                    this.cdtimer = setInterval(function(){
                        if(this.percent === 0) {
                            this.handsMove($('.hand1, .hand2'), 1);                    
                        } else if(this.percent === 35) {
                            this.handsMove($('.hand3, .hand4'), -1);
                        } else if(this.percent === 70) {
                            this.handsMove($('.hand5, .hand6'), 1);
                        }
                        $('#percent').text(this.percent);
                        if (this.percent === 100) {
                            this.loadEnd();
                            clearInterval(this.cdtimer);
                            return;
                        }
                        this.percent += 1;
                    }.bind(this), this.loadcd);
                };
            };
            
            var game = function() {
                this.canvas = $("#canvas");
                this.submit = $(".btn-submit");
                this.palette = $('.palette');
                this.popup = $('.popup');   
                this.btnShare = $('.btn-share');
                this.btnAgain = $('.btn-again');
                this.context = document.getElementById("canvas").getContext("2d");
                this.barLength = 120;
                this.choosePart = 1;
                this.layerNum = 1;
                this.paletteNum = 2;
                this.complete = 0;
                this.perfect = 0;
                this.mapArr = [[249,234,212],[148,189,234],[37,78,117],[223,56,57],[24,125,222],[1,0,1],[18,60,102],[205,255,1],[46,55,5]];
                this.stuffArr = _.fill(Array(9), 0);
                this.shareTitle = ['极简派配色大师','野兽派配色大师', '印象派配色大师', '现实主义配色大师', '完美主义配色大师'];
                
                this.init = function() {
                    var map = new Image();
                    map.src = "{{ imgsrc('images/map.jpg')}}";
                    $(map).load(function () {
                        this.insertMap(map);
                    }.bind(this));
                };
                this.insertMap = function(map){
                    this.context.drawImage(map, 0, 0, w, w/640*1006);                                        
                };
                this.canvas.on('touchstart', function (e) {
                    $('.game-notice').hide();
                    var canvasOffset = this.canvas.offset();
                    var canvasX = Math.floor(e.originalEvent.touches[0].pageX - canvasOffset.left);
                    var canvasY = Math.floor(e.originalEvent.touches[0].pageY - canvasOffset.top);
                    // 获取该点像素的数据
                    var imageData = this.context.getImageData(canvasX, canvasY, 1, 1);
                   // 获取该点像素数据
                    var pixel = imageData.data;
                    var part = this.paletteNum;
                    _.forEach(this.mapArr, function(value, n) {                        
                        var ismap = 0;
                        _.forEach(value,function(color,i) {
                            if(Math.abs(color - pixel[i]) < 10){
                                ++ismap;
                            };
                        })
                        if(ismap == 3) {
                            part = n + 1;    
                        }
                    });
                    
                    this.choosePart = part;
                    //console.log("存在的颜色,第几部分:" + part);
                    $('.palette').hide();
                    $('.palette-layer' + this.choosePart).show();
                    //$('.palette-layer' + this.choosePart + '.palette' + this.paletteNum).addClass('active');
                    
                    if ($('.part' + this.choosePart).hasClass('first')) {
                        $('.part' + this.choosePart).removeClass('white');
                        this.drawMap(this.choosePart,2);
                    }
                }.bind(this));
                this.drawMap = function (layer,palette) {
                    this.layerNum = layer;
                    this.paletteNum = palette;
                    $('.part' + layer + ' .stuff').hide();
                    $('.part' + layer + ' .stuff' + palette).show();
                    this.stuffArr[layer-1] = parseInt(palette);
                };
                this.submit.on('touchstart', function (e) {
                    var stuffs = this.stuffArr.toString();
                    var stuffArr = this.stuffArr;
                    _.remove(stuffArr, function(n) {
                        return n === 0;
                    });
                    this.complete = Math.ceil( stuffArr.length *1/9*100 );
                    this.perfect = Math.ceil( _.union(stuffArr).length *1/8*100 );
                    var score = this.complete + this.perfect;
                    
                    $.ajax({
                        url: '{{ urlFor("submit") }}',
                        type: 'POST',
                        data: {
                            stuffArr: stuffs,
                            score: score,
                            submit: 1
                        },
                        success: function(rsp){
                        }
                    });
                    TweenMax.fromTo($('.complete .bar'), 0.5, {width: 0, opacity: 1} , {width: this.barLength * this.complete / 100, opacity: 1, delay: 0.5});
                    TweenMax.fromTo($('.perfect .bar'), 0.5, {width: 0, opacity: 1} , {width: this.barLength * this.perfect / 100, opacity: 1, delay: 0.5});
                    $('.complete .score').text(this.complete + '%');
                    $('.perfect .score').text(this.perfect + '%');
                    
                    this.popup.show();
                    setTimeout(function () {
                        $('.game .gameover').hide();
                        $('.game .result').show();
                    }, 3000);
                    this.changeShare(score);
                    
                }.bind(this));
                
                this.changeShare = function (score) {
                    var level = Math.floor(score / 40);
                    var gameTitle = this.shareTitle[level];
                    var shareTitle = "xxxxx获得了"+ gameTitle +"称号";
                    var shareContent = '玩秘密花园吃货版，10元优惠券轻松到手，你行你试试？';
                    var timelineContent = "xxxxxx获得了"+ gameTitle +"称号" + "及10元优惠券，你行你试试？";
                    $('.chenghao').text('"' + gameTitle + '"');
                    wx.onMenuShareAppMessage({
                        title: shareTitle,
                        desc: shareContent,
                        link: lineLink,
                        imgUrl: imgUrl,
                        success: function () { 
                            _hmt.push(['_trackEvent','微信分享', '好友']);
                        }
                    });
                    wx.onMenuShareTimeline({
                        title: timelineContent, // 分享标题
                        link: lineLink, // 分享链接
                        imgUrl: imgUrl, // 分享图标
                        success: function () { 
                            _hmt.push(['_trackEvent','微信分享', '朋友圈']);
                        }
                    });
                };
                this.btnShare.on('touchstart', function (e) {
                    e.preventDefault();
                    $('.overlay').show();
                });
                this.btnAgain.on('touchstart', function (e) {
                    e.preventDefault();
                    $('.game .popup').hide();
                    $('.game .gameover').show();
                    $('.game .result').hide();
                    $('.part .stuff').hide();
                    $('.game-notice').show();
                    $('.palette').removeClass('active').hide();
                    $('.palette2').addClass('active');
                    $('.part .stuff:first-child').show();
                    $('.game .part').addClass("white").addClass("first");
                    this.complete = 0;
                    this.perfect = 0;
                    this.stuffArr = _.fill(Array(9), 0);
                }.bind(this));
            };
            
            var loading =  new loading();
            loading.start();            
            
            $("#canvas").attr("width",w).attr("height",h);
            var game =  new game();
            game.init();
            imagesLoaded($('#body'), function(e) {
                //console.log('load success');
                loading.loadAll = true;
                if( loading.animationEnd ) {
                    $('.index.page').hide();
                    $('.game.page').show();                    
                }
            });
            
            $('.palette').on('touchstart', function (e) {
                e.preventDefault();
                var layer = $(this).attr('data-layer');
                var palette = $(this).attr('data-palette');
                $('.palette-layer' + layer).removeClass("active");
                $(this).addClass('active');
                $('.game .part' + layer).removeClass('first');
                if(palette == 1) {
                    $('.game .part' + layer).addClass("white");
                } else {
                    $('.game .part' + layer).removeClass("white");
                }
                // console.log('第' + layer + '部分');
                // console.log('第'+ palette + '种颜色');
                game.drawMap(layer,palette);
            });
            
        });
    </script>
{% endblock %}
